<script>
import AsudeCom from "@/commponents/AsudeCom.vue";
import bj from "@/assets/logo.jpg";


// 引入router
// import router from '@/rouetr'
import router from '../../router';
// 引入验证账号密码
import { verify } from '@/api/home.js'

export default {
    data() {
        return {
            url: bj,
            teacher: '',
            text: '123',
            // 所属区域
            OwningRegion: localStorage.getItem('OwningRegion'),
        }
    },
    computed: {
        AsudeCom
    },
    methods: {
        jump() {
            // this.$router.push('/commponents/ykxMessage')
            this.$router.push('/Message/MessageIndex')
        },
        myLink() {
            router.push('/login');
            // console.log(123);
        },
        removeName() {
            localStorage.removeItem('teacher')
            router.push('/login')
        },




    },
    mounted() {


        this.teacher = window.localStorage.getItem('teacher');

        

    }
};
</script>

<template>
    <div class="common-layout">
        <el-container>
            <el-header>
                <div class="log">
                    <el-image style="width: 60px; height: 60px" :src="url" />

                    <h4 class="title">家校互动后台管理系统</h4>
                </div>

                <!-- <el-button type="primary" @click="jump">首页</el-button> -->
                <el-button type="primary" @click="jump">家校互动</el-button>
                <el-button type="primary" @click="jump">局校通知</el-button>
                <el-button type="primary" @click="jump">消息统计</el-button>
                <el-button type="primary" @click="jump">用户统计</el-button>
                <el-button type="primary" @click="jump">学校管理</el-button>
                <el-button type="primary" @click="removeName">退出登录</el-button>

            </el-header>
            <el-container>

                <el-main>

                    <!-- 首页页面 -->
                    <!-- 头部用户信息 -->
                    <header class="myheader">

                        <!-- 用户头像 -->
                        <div class="myimg" v-if="!this.teacher">

                        </div>
                        <div class="myimg" v-else>
                            <img src="../../assets/2.jpg" alt="">
                        </div>
                        <!-- 用户名 -->
                        <p class="p1" v-if="!this.teacher" @click="myLink">点我登录</p>
                        <p class="p1" v-else>亲爱的{{ teacher }}，祝您开心每一天！</p>
                        <!-- 用户身份  （固定） -->
                        <p class="p2" v-if="!this.teacher">校园名称 | 管理员权限</p>
                        <p class="p2" v-else>智慧校园 | 超级管理员</p>

                    </header>

                    <el-row :gutter="12">
                        <el-col :span="4">
                            <p>本单位信息</p>
                            <span>所属区域 : {{ OwningRegion }}</span>
                        </el-col>
                        <el-col :span="6">
                            <p>今日简报</p>
                            <span>校园信息 ： <a href="https://www.sohu.com/a/124212757_349507">三年级六班竟然...</a><br><br></span>
                            <apan>班级信息 ： <a
                                    href="https://www.so.com/s?q=%E7%8F%AD%E9%95%BF%E6%97%A5%E6%8A%A5&ie=utf-8&src=se7_newtab_big">班长日报</a>
                            </apan>
                        </el-col>
                        <el-col :span="10">
                            <p>快捷应用</p>
                            <el-button color="#626aef" :dark="isDark">发布通知</el-button>
                            <el-button color="#ff8" :dark="isDark">发起投票</el-button>
                            <el-button color="#eee" :dark="isDark">学生请假</el-button>
                            <el-button color="#f77" :dark="isDark">日常评价</el-button>
                            <el-button color="#aaa" :dark="isDark">带药提醒</el-button>

                        </el-col>

                    </el-row>
<main id="main"></main>
                </el-main>
            </el-container>
        </el-container>



    </div>
    <main id="main"></main>
</template>
<style lang="scss" scoped>
.el-container {
    height: 100%;

    .el-aside {
        background-color: rgb(158, 172, 210);
        width: v-bind(asideWidth);
        transition: all 0.2s;
        opacity: 1;

        .title {
            font-size: 50px;
            margin-left: 10px;
        }
    }

    /* 导航栏头部 */
    .el-header {
        height: 100px;
        background-color: rgb(21, 118, 203);
        display: flex;
        justify-content: space-between;
        align-items: center;

        .log {
            width: 300px;
            height: 100px;
            display: flex;
            align-items: center;
            padding: 0 10px;
            justify-content: space-around;
        }

        .el-avatar {
            float: right;
        }

        .dat {
            margin-right: 20px;
            margin-top: 5px;
        }
    }

    /* 文档内容 */
    .el-main {
        background-color: rgb(232, 232, 232);
        background-image: url("../assets/zz.jpg");
        background-size: cover;
    }
}

/* 用户信息 */
.myheader {
    height: 130px;
    width: 100%;
    background: white;
    /* margin-left: 15px; */
    border: 1px solid rgb(162, 162, 162);
    position: relative;

    /* 用户头像 */
    .myimg {
        height: 100px;
        width: 100px;
        background: rgb(171, 150, 150);
        border-radius: 50%;
        margin-top: 20px;
        margin-left: 20px;
        float: left;
        overflow: hidden;

        img {
            height: 100%;
            width: 100%;

        }
    }

    /* 用户姓名 */
    .p1 {
        height: 30px;
        width: 270px;
        font-size: 18px;
        color: #000;
        /* background-color: aqua; */
        display: block;
        float: left;
        text-align: center;
        line-height: 30px;
        cursor: pointer;
    }

    /* 用户身份信息 */
    .p2 {
        height: 30px;
        width: 200px;
        font-size: 15px;
        color: rgb(112, 112, 112);
        /* background-color: aqua; */
        display: block;
        position: absolute;
        top: 50px;
        left: 120px;
        text-align: center;
        line-height: 30px;
    }
}

/* 本单位信息 */

.el-row {
    margin-bottom: 20px;
    margin-top: 40px;
    height: 120px;
    /* background-color: white; */
    display: flex;
    justify-content: space-between;

    p {
        border-bottom: 1px solid #666;
        text-align: center;
        height: 20px;
        line-height: 10px;

    }
}

.el-row:last-child {
    margin-bottom: 0;
}

.el-col {
    border-radius: 4px;
    background-color: white;

    .myheader {
        border: none;
    }
}

.grid-content {
    border-radius: 4px;
    min-height: 36px;
}
</style>
